<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>a：{{a}}</h4>
		<h4>b：{{b}}</h4>
		<h4>c：{{c}}</h4>
		<h4>d：{{d}}</h4>
		<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
  </div>
</template>


<!-- 
	利用$attrs的方法进行组件传参.....
	其实也是props的方法差不多
	父组件向 子组件传参 abcdxx变量 updataA方法
	这个时候,我们在子组件中会把我们给的所有参数都存储在$attrs中去.如果我们在子组件中去使用
	defineProps进行获得参数.才会把我们在$attrs中的参数转换到Props中去
	而我们可以利用子组件给孙组件传参$attrs的形式
	<GrandChild v-bind="$attrs"/>
	去给我们的孙组件传参.....这个参数是父组件的参数
	但是会有中间人的参与,也就是还是要一层一层的传递下来.............

 -->
<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import {ref} from 'vue'

	let a = ref(1)
	let b = ref(2)
	let c = ref(3)
	let d = ref(4)

	function updateA(value:number){
		a.value += value
	}
</script>

<style scoped>
	.father{
		background-color: rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>
